<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 60px;
				margin: 0 auto;
			}

			div span {
				display: inline-block;
				width: 40px;
				height: 40px;
				background-color: #3c3a33;
				text-align: center;
				line-height: 40px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div>
			<span class="hour">06</span>:
			<span class="min">10</span>:
			<span class="sec">50</span>
		</div>
		<script type="text/javascript">
			var hour = document.querySelector(".hour");
			var min = document.querySelector(".min");
			var sec = document.querySelector(".sec");
			
			//页面加载时执行一次
			countDown();
			
			//一秒后重复执行
			setInterval(countDown, 1000);

			function countDown() {
				var startTime = Date.now(); //毫秒
				var endTime = new Date(2022, 10, 21, 17, 30, 30);
				endTime = endTime.getTime(); //毫秒

				//剩余时间(秒)
				var time = (endTime - startTime) / 1000;

				//时
				var h = Math.floor(time / 60 / 60 % 24);
				h = h < 10 ? "0" + h : h;
				//分
				var m = Math.floor(time / 60 % 60);
				m = m < 10 ? "0" + m : m;
				//秒
				var s = Math.floor(time % 60);
				s = s < 10 ? "0" + s : s;
				
				hour.innerHTML = h;
				min.innerHTML = m;
				sec.innerHTML = s;
			}
		</script>
	</body>
</html>
